<script setup>
import MonitoringBox1 from '@/components/MonitoringBox1.vue';
import zyfb from '@/views/visualization/zyfb.vue'
import stfq from '@/views/visualization/stfq.vue'
import nlzfb from '@/views/visualization/nlzfb.vue'

import { useRouter } from 'vue-router';
const router = useRouter()
import { useTabsStore } from '@/store/tabs';
const tabsStore = useTabsStore()

function openTab(item) {
    router.push(item.path)
    tabsStore.addTab(item)
}
</script>

<template>
    <lay-row space="0">
        <lay-col md="16">
            <lay-row space="10">
                <lay-col sm="24">
                    <lay-card title="快捷入口">
                        <ul class="kjrk">
                            <li @click="openTab({ path: '/admin/resource', name: '资源管理' });">
                                <lay-icon type="layui-icon-tabs"></lay-icon><br>
                                <span>资源管理</span>
                            </li>
                            <li @click="openTab({ path: '/admin/resource/totals', name: '数据汇总' });">
                                <lay-icon type="layui-icon-template-one"></lay-icon><br>
                                <span>数据汇总</span>
                            </li>
                            <li @click="openTab({ path: '/admin/param', name: '生态参数' });">
                                <lay-icon type="layui-icon-form"></lay-icon><br>
                                <span>生态参数</span>
                            </li>
                            <li @click="openTab({ path: '/admin/wzlpg/support', name: '物质量评估' });">
                                <lay-icon type="layui-icon-tree"></lay-icon><br>
                                <span>物质量评估</span>
                            </li>
                            <li @click="openTab({ path: '/admin/jzlpg/support', name: '价值量评估' });">
                                <lay-icon type="layui-icon-chart"></lay-icon><br>
                                <span>价值量评估</span>
                            </li>
                            <li @click="openTab({ path: '/admin/system/user', name: '用户管理' });">
                                <lay-icon type="layui-icon-username"></lay-icon><br>
                                <span>用户管理</span>
                            </li>
                        </ul>
                    </lay-card>
                </lay-col>
                <!-- <lay-col sm="12">
                    <lay-card title="代办事项">
                        代办事项
                    </lay-card>
                </lay-col> -->
                <lay-col sm="24">
                    <lay-card title="资源分布情况">
                        <zyfb></zyfb>
                    </lay-card>

                </lay-col>
                <lay-col sm="12">
                    <lay-card title="年龄组占比">
                        <nlzfb></nlzfb>
                    </lay-card>
                </lay-col>
                <lay-col sm="12">
                    <lay-card title="生态分区占比">
                        <stfq></stfq>
                    </lay-card>
                </lay-col>
            </lay-row>

        </lay-col>
        <lay-col md="8">
            <lay-row space="10">
                <lay-col>
                    <lay-card title="版本信息">
                        <lay-descriptions :border="true" size="md" column="1">
                            <lay-descriptions-item label="页面模式">单页面</lay-descriptions-item>
                            <lay-descriptions-item label="涉及技术">Django / vue / layui-vue / 前后端分离</lay-descriptions-item>
                            <lay-descriptions-item label="数据库">db.sqlite3</lay-descriptions-item>
                            <lay-descriptions-item label="主要特色">单页面 / 响应式 / 清爽 / 极简</lay-descriptions-item>
                            <lay-descriptions-item label="地点">中国、广西、南宁市</lay-descriptions-item>
                        </lay-descriptions>
                    </lay-card>
                </lay-col>
                <lay-col sm="24">
                    <!-- <lay-card title="数据概览">
                        <MonitoringBox1></MonitoringBox1>
                    </lay-card> -->
                </lay-col>

            </lay-row>
        </lay-col>

    </lay-row>

</template>

<style scoped>
.grid-demo {
    line-height: 50px;
    border-radius: 2px;
    text-align: center;
    background-color: var(--global-checked-color);
    color: #fff;
}

.kjrk {
    display: grid;
    /* grid-template-columns: 1fr 1fr 1fr; */
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
}

.kjrk li {
    /* background-color: antiquewhite; */
    border-radius: 5px;
    text-align: center;
    border: 1px solid #eaeaea;
    background-color: #fefefe;
    min-height: 60px;
    color: #929292;
    font-size: 12px;
    padding: 5px;
}

.kjrk li:hover {
    cursor: pointer;
    font-size: 13px;
    color: var(--global-checked-color);
    box-shadow: 2px 2px 10px rgb(0, 0, 0, 0.1);
    background-color: #fff;
}

.kjrk li:hover>i {
    font-size: 30px;
}

.kjrk li i {
    font-size: 25px;
    font-weight: bold;
    line-height: 50px;
}
</style>
